<template>
  <app-main-wrapper :loading="loading">
    <page-title class="title" title='MY ACCOUNT' subtitle='PROFILE'
                :style='{background: "url(" + titleBackImg + ")"}'/>
    <div class="main-content">
      <good-detail class="detail" :data="goodData" :height="690"/>
      <good-info class="good-info" :data="goodData"/>
      <page-title title="TOP SELLERS" subtitle="BEST BRAND" style="margin-top: 30px"/>
      <page-top-select style="margin: 60px 0"/>
      <page-title title="Related Products" subtitle="" style="margin-top: 30px"/>
      <store-related-products :id="10000" style="margin-top: 60px"/>
    </div>
  </app-main-wrapper>
</template>

<script>
import AppMainWrapper from '@/components/wrapper/AppMainWrapper'
import GoodDetail from '@/views/part/shopDetail/GoodDetail'
import PageTitle from '@/views/part/index/PageTitle'
import titleImg from '@img/page-titlebg.png'
import PageTopSelect from '@/views/part/index/PageTopSelect'
import GoodInfo from '@/views/part/shopDetail/GoodInfo'
import StoreRelatedProducts from '@/views/part/shopDetail/StoreRelatedProducts'
import { queryGoodDetailById } from '@/api/ApiGoodDetail'
import { ResultCode } from '@/constants/constants'

export default {
  name: 'AppShopDetail',
  props: {
    id: {
      required: true,
      type: [Number, String],
      default: 0
    }
  },
  components: {
    StoreRelatedProducts,
    GoodInfo,
    PageTopSelect,
    PageTitle,
    GoodDetail,
    AppMainWrapper
  },
  data () {
    return {
      loading: true,
      titleBackImg: titleImg,
      goodData: {}
    }
  },
  methods: {
    /**
     * 查询数据并填充
     */
    freshData () {
      this.loading = true
      queryGoodDetailById(this.id, data => {
        if (data && data.code === ResultCode.OK) {
          const good = data.object
          if (!good || good === 'null') {
            this.$message.error('商品不存在')
            return
          }
          this.goodData = good
        }
      }, () => {
        this.loading = false
      })
      this.toTop()
    },
    toTop () {
      window.scroll(0, 0)
    }
  },
  watch: {
    id () {
      this.freshData()
    }
  },
  // 滚动到最上面
  mounted () {
    this.freshData()
  }
}
</script>

<style lang="scss" scoped>

  .title{
    width: 100%;
    height: 180px;
    user-select: none;
    padding: 54px 220px;
    letter-spacing: -1px;
  }

  .main-content{
    max-width: 1110px;
    width: 100%;
    margin: 0 auto;

    .detail{
      margin: 100px 0 70px;
    }

    .good-info{
      margin-bottom: 50px;
    }

  }

</style>
